<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    
<% request.setCharacterEncoding("UTF-8"); %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/reset.css" rel="stylesheet" type="text/css">
<link href="../css/lib.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
//화면 로딩 시 실행
$(document).ready(function(){
	 $("#searchDetail").css({
		  "display"			: "none"
	})
	, $(".ap_list_title_").css({ // 리스트 head 글자 부분
		  "display" 		: "inline"
		, "margin-right" 	: "20px"
		, "color"			: "#20a6ff"
		
	})
	, $(".ap_list_title").css({ // 리스트 head 부분
		  "border-top" 		: "2px solid #cccccc"
		, "border-bottom" 	: "1px solid #cccccc"
		, "padding"			: "5px"
		, "width"			: "1000px"
		, "text-align"		: "center"
		, "margin-left"		: "10px"
		, "margin-top"		: "5px"
		, "background-color": "#eeeeeeff"
	})
	, $(".ap_list_content").css({ // 리스트 content 부분
		  "border-bottom" 	: "1px solid #cccccc"
		, "padding"			: "5px"
		, "width"			: "1000px"
		, "text-align"		: "center"
		, "margin-left"		: "10px"
	})
	, $(".ap_list_bottom").css({ // 리스트 bottom 부분
		  "border-bottom" 	: "2px solid #cccccc"
		, "padding"			: "5px"
		, "width"			: "1000px"
		, "text-align"		: "center"
		, "margin-left"		: "10px"
	})
	, $(".creditsearch").css({
		  "width"			: "1010px"
		, "margin-left"		: "10px"
	});
});

//'상세검색' 버튼 눌렀을 때 화면에 보이게/안보이게 하기
function searchDetail(){ 
	$("#searchDetail").each(function() {
	    if ($(this).css("display") == "none") {
	    	$("#searchDetail").css({
	    		"display" : ""
	    	});
	    } else {
	    	$("#searchDetail").css({
	    		"display" : "none"
	    	});
	    }
	});
}
//'조회' 버튼을 눌렀을 때
function ap_list_search(){
	alert("결재번호로 조회");
}
</script>
</head>
<body>
 <h1>결재원장</h1><br/><br/>
            <!-- 검색박스시작 -->
            <div class="creditsearch">
                <form name="" method="" action="">
                    <fieldset>
                        <div class="cre_search">
                        <label>결재번호 :</label>
                        <input class="w110px" type="text" name="" title="글입력박스" />
                        <input type="button" name="" value="조회" class="graybtn cp" onclick="ap_list_search()" />
                        <input type="button" name="" value="상세조회" class="graybtn cp" onclick="searchDetail()" />
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="creditsearch" id="searchDetail">
                <form name="" method="" action="">
                    <fieldset>
                        <div class="cre_search">
                        <label>상세검색항목 :</label>
                        <input class="w110px" type="text" name="" title="글입력박스" />
                        <input type="button" name="" value="조회" class="graybtn cp" onclick="#" />
                        </div>
                    </fieldset>
                    
                </form>
            </div>
            <!-- 검색박스종료 -->
            
            <div class="ap_list_title">
	            <div class="ap_list_title_"><b>결재번호</b></div>
	            <div class="ap_list_title_"><b>계약번호</b></div>
	            <div class="ap_list_title_"><b>사원번호</b></b></div>
	            <div class="ap_list_title_"><b>진행상태</b></div>
	            <div class="ap_list_title_"><b>요청일</b></div>
	            <div class="ap_list_title_"><b>요청자</b></div>
	            <div class="ap_list_title_"><b>승인자</b></div>
	            <div class="ap_list_title_"><b>요청내용</b></div>
	            <div class="ap_list_title_"><b>등록자</b></div>
	            <div class="ap_list_title_"><b>등록일</b></div>
	            <div class="ap_list_title_"><b>수정자</b></div>
	            <div class="ap_list_title_"><b>수정일</b></div>
            </div>
		
		<div class="ap_list_content">&nbsp;
		</div>
		<div class="ap_list_content">&nbsp;
		</div>
		<div class="ap_list_content">&nbsp;
		</div>
		<div class="ap_list_content">&nbsp;
		</div>
		<div class="ap_list_content">&nbsp;
		</div>
		
		<div class="ap_list_bottom">&nbsp;
		</div>
			
</body>
</html>